<!--
 * @Description:提示/预警信息 reminders
 * @Autor: 刘诗文
 * @Date: 2020-12-17 15:26:32
 * @LastEditors: 刘诗文
 * @LastEditTime: 2020-12-28 10:05:11
-->
<template>
  <div>
    <el-row :gutter="20" style="margin-bottom: 10px">
      <el-col :span="12" :offset="0">
        <BreakSpace label="提示信息" :containerStyle="{ marginBottom: '10px' }"></BreakSpace>
        <FilterTable
          ref="hintInfoTable"
          height="175px"
          :dataSource="hintInfoDataSource"
          :isPagination="false"
          :isColumnFilter="false"
          :isToperInfo="false"
          :isSelectColumn="false"
          :columns="hintInfoColumns"
          :onColumnsChange="columns => (this.hintInfoColumns = columns)"
        ></FilterTable>
      </el-col>
      <el-col :span="12" :offset="0">
        <BreakSpace label="预警信息" :containerStyle="{ marginBottom: '10px' }"></BreakSpace>
        <FilterTable
          ref="warningTable"
          height="auto"
          :dataSource="warningDataSource"
          :isPagination="false"
          :isColumnFilter="false"
          :isToperInfo="false"
          :isSelectColumn="false"
          :columns="warningColumns"
          :onColumnsChange="columns => (this.warningColumns = columns)"
        >
        </FilterTable>
      </el-col>
    </el-row>

    <div class="btnWrap">
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { confirmAction, notifyAction } from '@/utils';

import { queryMonitorInfo } from '@/api/repair/repairReception/customer';

export default {
  props: ['vin'],
  mixins: [dictionary],
  data() {
    return {
      queryIngData: false, // 页面是否在请求
      warningColumns: this.createWarningColumns(),
      hintInfoColumns: this.createHintInfoColumns(),
      hintInfoDataSource: [], // 提示信息数据源
      warningDataSource: [] // 预警信息
    };
  },
  watch: {
    queryIngData(newVal, oldVal) {
      console.log(newVal);
      if (newVal) {
        this.$refs.hintInfoTable.START_LOADING();
        this.$refs.warningTable.START_LOADING();
      } else {
        this.$refs.hintInfoTable.STOP_LOADING();
        this.$refs.warningTable.STOP_LOADING();
      }
    }
  },
  mounted() {
    this.vin && this.initQuery();
    console.log('提示预警页面');
    console.log(this.vin);
  },
  methods: {
    createHintInfoColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '监控信息',
          dataIndex: 'message'
        }
      ];
    },
    createWarningColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '预警信息',
          dataIndex: 'ASSEMBLY_NAME',
          align: 'center'
        }
      ];
    },
    // 初始化查询
    async initQuery() {
      this.queryIngData = true;
      try {
        let res = await queryMonitorInfo({ vin: this.vin });
        if (res.resultCode == 200) {
          let data = res.data;
          // 提示信息部分数据
          let hintInfo = [];
          hintInfo[0] = data.IsFiristRepair == 10041001 ? { message: '该车辆首次进厂' } : { message: '该车辆非首次进厂' };
          hintInfo[1] = { message: '该车未结清账款：' + data.arrearsInfo + '元' };
          hintInfo[2] = data.nextMaintainDate ? { message: '预计下次保养日期：' + data.nextMaintainDate.split(' ')[0] } : { message: '预计下次保养日期：暂无' };
          hintInfo[3] = data.insuranceEndDate ? { message: '保险到期日期：' + data.insuranceEndDate } : { message: '暂无保单信息' };
          this.hintInfoDataSource = hintInfo;
          // 预警信息
          data.warningInfo.forEach(item => {
            item.ASSEMBLY_NAME = item.ASSEMBLY_NAME + '已达到预警';
          });
          this.warningDataSource = data.warningInfo;
        }
      } catch (err) {
        console.log(err, '查询监控信息失败');
      } finally {
        this.queryIngData = false;
      }
    },
    // 点击取消
    handleCancel() {
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.hintMessageWrap {
  min-height: 200px;
}
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
